<template>
  <div class="c-table-form">
    <a-form
      layout="inline"
      :form="form"
      ref="tableForm"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <div
        v-for="(item, index) in datas"
        :key="index"
        class="display-inline-block table-form-item"
      >
        <a-form-item
          v-if="item.type == 'select'"
          :label="item.label"
          :prop="item.prop"
        >
          <a-select allowClear @change="onSearch" :style="{width:item.width? item.width + 'px':'150px' }"  v-model="form[item.prop]">
            <a-select-option
              v-for="(sItem, idx) in item.typeData"
              :key="idx"
              :value="sItem.value"
              >{{ sItem.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="item.type == 'date-picker'"
          :label="item.label"
          :prop="item.prop"
        >
          <c-range-picker @change="onChangeDataPicker" />
        </a-form-item>
        <a-form-item v-if="item.type == 'search'" :prop="item.prop">
          <a-input
            allowClear
            class="table-search-input"
             v-model="form[item.prop]"
            :placeholder="item.label"
            enter-button
            @pressEnter="onSearch()"
          />
          
        </a-form-item>
        <a-form-item
          v-if="item.type == 'search'" 
        >
          <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
        </a-form-item>
        <a-form-item
          v-if="item.type == 'addBtn'"
          :label="item.label"
          :prop="item.prop"
        >
          <a-button type="primary" icon="plus" @click="onAdd()">新增</a-button>
        </a-form-item>
        <a-form-item
          v-if="item.type == 'exportBtn'"
          :label="item.label"
          :prop="item.prop"
        >
          <a-button class="bgGreen" icon="download" @click="onExport()"
            >导出</a-button
          >
        </a-form-item>
        <a-form-item
          v-if="item.type == 'slot'"
          :label="item.label"
          :prop="item.prop"
        >
          <slot :name="item.prop" :tableRow="item"></slot>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TableForm",
  props: {
    datas: {
      type: Array,
      default: () => {
        return [];
      }
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    },
    labelCol: {
      type: Object,
      default: () => {
        return {};
      }
    },
    wrapperCol: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      form: {}
    };
  },
  watch: {
    value(val) {
      this.form = val;
    }
  },
  computed: {},
  created() {
    this.form = this.value;
  },
  mounted() {},
  methods: {
    onChangeDataPicker(val) {
     this.$emit("onChangeDataPicker", val);
    },
    onAdd(event) {
      this.$emit("onAdd");
    },
    onChangeSelect(event) {
      this.$emit("onChangeSelect");
    },    
    onExport(val) {
      this.$emit("onExport");
    },
    onSearch() {
      this.$emit("onSearch", this.form);
    }
  }
};
</script>

<style lang="less" scoped>
.table-search-input {
  width: 300px;
}
.table-form-item {
  margin-bottom: 10px;
}
.c-table-form{
  margin-bottom: 8px;
}
</style>
